<template>
  <div class="statistics-wrap">
    <div class="statistics-content">

    
    <h3 class="title">
      <div>
        <span class="line"></span>资金统计
      </div>
    </h3>

    <div class="top">
      <div class="top-item top-item1">
        <img class="bg-img" src="@/assets/capital/bg1.png" alt />
        <img class="icon-img icon-img1" src="@/assets/capital/icon1.png" alt />
        <p class="title-text">
          用户总资产（元）
          <img
            v-if="capitalData.other_role == 'SPECIAL'"
            class="mark-img"
            src="@/assets/capital/icon5.png"
            alt
            title="用户总资产=代理钱包资产+精选钱包资产"
          />
          <img
            v-else
            class="mark-img"
            src="@/assets/capital/icon5.png"
            alt
            title="用户总资产=代理钱包资产+普通钱包资产"
          />
        </p>
        <count-to
          :start-val="0"
          :decimals="2"
          :end-val="+capitalData.wallet_total_money || 0"
          :duration="300"
          class="card-panel-num"
        />
      </div>
      <div class="top-item top-item2">
        <img class="bg-img bg-img2" src="@/assets/capital/bg2.png" alt />
        <img class="icon-img icon-img2" src="@/assets/capital/icon2.png" alt />
        <p class="title-text">代理钱包资产（元）</p>
        <count-to
          :start-val="0"
          :decimals="2"
          :end-val="+capitalData.wallet_agency_total_money || 0"
          :duration="300"
          class="card-panel-num"
        />
      </div>

      <div class="top-item top-item3">
        <img class="bg-img bg-img3" src="@/assets/capital/bg3.png" alt />
        <img class="icon-img icon-img3" src="@/assets/capital/icon3.png" alt />
        <p v-if="capitalData.other_role == 'SPECIAL'" class="title-text">精选钱包资产（元）</p>
        <p v-else class="title-text">普通钱包资产（元）</p>
        <count-to
          v-if="capitalData.other_role == 'SPECIAL'"
          :start-val="0"
          :decimals="2"
          :end-val="+capitalData.wallet_special_total_money || 0"
          :duration="300"
          class="card-panel-num"
        />
        <count-to
          v-else
          :start-val="0"
          :decimals="2"
          :end-val="+capitalData.wallet_buyer_total_money || 0"
          :duration="300"
          class="card-panel-num"
        />
        <p class="btn-box">
          <span class="btn" @click="lookHandle(capitalData.other_role)">
            去看看
            <img src="../../assets/capital/icon4.png" alt />
          </span>
        </p>
      </div>
    </div>

    <div class="content">
      <div class="content-item">
        <div class="content-title">
          <span>当前钱包 - 代理钱包</span>
        </div>
        <div class="content-box">
          <div class="chart-box">
            <div class="chart-mask">
              <span v-if="labelFlag" :class="{'no-tip':!chartFlag}">{{chartFlag ? '资金占比' : '暂无数据'}}</span>
            </div>
            <WalletChart
              v-if="chartFlag"
              ref="WalletChart"
              :capitalData="capitalData"
              @chartMouseHandle="chartMouseHandle"
            />
          </div>
          <div class="content-text">
            <div class="content-top">
              <p class="top-p">
                代理钱包资产（元）
                <img
                  class="mark-img"
                  src="@/assets/capital/icon5.png"
                  alt
                  title="代理钱包资产=可用余额+在途金额+待返还订金+待收代理费"
                />
              </p>
              <count-to
                :start-val="0"
                :decimals="2"
                :end-val="+capitalData.wallet_agency_total_money || 0"
                :duration="300"
                class="card-panel-num"
              />
            </div>
            <div class="list">
              <div class="list-itme">
                <div class="item">
                  <div
                    class="item-cursor"
                    @mouseover="chartMouseover(1,3)"
                    @mouseout="chartMouseover(0,3)"
                  >
                    <count-to
                      :start-val="0"
                      :decimals="2"
                      :end-val="+capitalData.usable_money || 0"
                      :duration="300"
                      class="card-panel-num"
                    />
                    <span class="item-tip">可用余额（元）</span>
                  </div>
                </div>
                <div class="item item2">
                  <div
                    class="item-cursor"
                    @mouseover="chartMouseover(1,0)"
                    @mouseout="chartMouseover(0,0)"
                  >
                    <count-to
                      :start-val="0"
                      :decimals="2"
                      :end-val="+capitalData.intransit_money || 0"
                      :duration="300"
                      class="card-panel-num"
                    />
                    <span class="item-tip">在途金额（元）</span>
                  </div>
                </div>
              </div>
              <div class="list-itme">
                <div class="item item3">
                  <div
                    class="item-cursor"
                    @mouseover="chartMouseover(1,2)"
                    @mouseout="chartMouseover(0,2)"
                  >
                    <count-to
                      :start-val="0"
                      :decimals="2"
                      :end-val="+capitalData.duein_deposit || 0"
                      :duration="300"
                      class="card-panel-num"
                    />
                    <span class="item-tip">待返还订金（元）</span>
                  </div>
                </div>
                <div class="item item4">
                  <div
                    class="item-cursor"
                    @mouseover="chartMouseover(1,1)"
                    @mouseout="chartMouseover(0,1)"
                  >
                    <count-to
                      :start-val="0"
                      :decimals="2"
                      :end-val="+capitalData.duein_agency_fee || 0"
                      :duration="300"
                      class="card-panel-num"
                    />
                    <span class="item-tip">待收代理费（元）</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="other-box content-item">
        <div class="content-title">
          <span>其他统计</span>
        </div>
        <div class="list">
          <div class="item">
            <div class="text">
              <span class="item-tip">累计充值（元）</span>
              <count-to
                :start-val="0"
                :decimals="2"
                :end-val="+capitalData.agency_total_recharge || 0"
                :duration="300"
                class="card-panel-num"
              />
            </div>
          </div>
          <div class="item">
            <div class="text">
              <span class="item-tip">累计提现（元）</span>
              <count-to
                :start-val="0"
                :decimals="2"
                :end-val="+capitalData.agency_total_withdraw || 0"
                :duration="300"
                class="card-panel-num"
              />
            </div>
          </div>
          <div class="item">
            <div class="text">
              <span class="item-tip">累计收取代理费（元）</span>
              <count-to
                :start-val="0"
                :decimals="2"
                :end-val="+capitalData.agency_total_income_fee || 0"
                :duration="300"
                class="card-panel-num"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import WalletChart from "./components/wallet-chart";
import { getCapitalStatistics } from "@/api/capital";
export default {
  data() {
    return {
      chartFlag: false,
      labelFlag: 1,
      capitalData: {},
    };
  },
  components: {
    CountTo,
    WalletChart,
  },
  created() {
    this._getCapitalStatistics();
  },
  methods: {
    // 获取资金统计数据
    _getCapitalStatistics() {
      getCapitalStatistics()
        .then((res) => {
          if (res.code == 1 && res.data) {
            this.capitalData = res.data;
            this.chartFlag = true;
            console.log("资金统计数据", this.capitalData);
          } else {
            this.chartFlag = false;
            console.log("资金统计请求错误", res.msg || "请求失败");
          }
        })
        .catch((error) => {
          reject(error);
          this.chartFlag = false;
        });
    },
    // 去看看
    lookHandle(other_role) {
      if (other_role == "SPECIAL") {
        window.location.href =
          process.env.VUE_APP_BASE_MEMBER + "/member/wallet/specialStatistics";
      } else {
        window.location.href =
          process.env.VUE_APP_BASE_MEMBER + "/member/wallet/ordinaryStatistics";
      }
    },
    // 自定义触发echarts鼠标移上/移出
    chartMouseover(type, index) {
      this.$refs.WalletChart.chartMouseover(type, index);
    },
    // echart触发鼠标事件
    chartMouseHandle(flag) {
      this.labelFlag = flag;
    },
  },
};
</script>

<style lang='scss' scoped>
.statistics-wrap {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  color: #333;
  overflow: auto;
  .statistics-content{
    min-width: 1400px;
  }
  .title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    height: 54px;
    line-height: 54px;
    padding: 0 20px;
    background: #fff;
    margin: 0;
    display: flex;
    justify-content: space-between;
    .line {
      display: inline-block;
      width: 3px;
      height: 18px;
      background: #fe6616;
      border-radius: 2px;
      margin: 0 10px -2px 0;
    }
  }
  .top {
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 16px 30px 40px 30px;
    color: #333;
    .top-item {
      width: 32%;
      height: 228px;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 1),
        rgba(249, 249, 251, 1)
      );
      border: 1px solid rgba(247, 235, 233, 1);
      box-shadow: 0px 2px 15px 0px rgba(209, 210, 217, 0.3);
      border-radius: 4px;
      position: relative;
      padding: 56px 0 0 30px;
      .card-panel-num {
        font-size: 24px;
        font-weight: bold;
      }
      .bg-img {
        position: absolute;
        width: 143px;
        top: 60px;
        right: 6%;
        &.bg-img2 {
          width: 150px;
          top: 75px;
        }
        &.bg-img3 {
          width: 178px;
          top: 80px;
        }
      }
      .icon-img {
        width: 33px;
        height: 31px;
        &.icon-img2 {
          width: 34px;
          height: 29px;
        }
        &.icon-img3 {
          width: 37px;
          height: 24px;
        }
      }

      .title-text {
        .mark-img {
          width: 20px;
          height: 20px;
          display: inline-block;
          vertical-align: bottom;
          position: relative;
          top: 1px;
        }
      }
      .btn-box {
        display: flex;
        margin: 0;
        .btn {
          display: block;
          font-size: 14px;
          color: #f3640e;
          margin-top: 15px;
          cursor: pointer;
          img {
            width: 7px;
            height: 10px;
            margin-left: 3px;
          }
        }
      }
    }
  }
  .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .content-item {
      width: 49.4%;
      background: #fff;
      height: 460px;
      border-radius: 2px;
      .content-title {
        font-size: 18px;
        font-weight: bold;
        height: 14%;
        line-height: 75px;
        padding-left: 30px;
        border-bottom: 1px solid #ebf0f2;
        box-sizing: border-box;
      }
      .content-box {
        width: 100%;
        height: 86%;
        position: relative;
        .chart-box {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          // z-index: 5;
          .chart-mask {
            position: absolute;
            width: 280px;
            height: 280px;
            border: 30px solid #f9f9fb;
            top: 50%;
            left: 50.2px;
            transform: translateY(-50%);
            border-radius: 50%;
            span {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 18px;
              color: #999;
              font-weight: bold;
              &.no-tip {
                color: #ccc;
              }
            }
          }
        }
        .content-text {
          width: 50%;
          height: 100%;
          float: right;
          position: relative;
          padding-top: 50px;
          .content-top {
            padding-bottom: 50px;
            .top-p {
              position: relative;
              // z-index: 8;
              .mark-img {
                width: 20px;
                height: 20px;
                display: inline-block;
                vertical-align: bottom;
                position: relative;
                top: 1px;
              }
            }
            .card-panel-num {
              font-size: 24px;
              font-weight: bold;
            }
          }
          .list {
            .list-itme {
              display: flex;
              &:first-of-type {
                margin-bottom: 50px;
              }
              .item {
                position: relative;
                padding-left: 18px;
                .item-cursor {
                  display: inline-block;
                  cursor: pointer;
                }
                .card-panel-num {
                  font-size: 18px;
                  font-weight: bolder;
                  display: block;
                  padding-bottom: 17px;
                }
                .item-tip {
                  font-size: 14px;
                  color: #999;
                }
                &:first-of-type {
                  width: 55%;
                }
                &::before {
                  content: "";
                  width: 4px;
                  height: 20px;
                  background: #057a82;
                  position: absolute;
                  top: 2px;
                  left: 0;
                }
                &.item2 {
                  &::before {
                    background: #f3640e;
                  }
                }
                &.item3 {
                  &::before {
                    background: #425563;
                  }
                }
                &.item4 {
                  &::before {
                    background: #bfa8a1;
                  }
                }
              }
            }
          }
        }
      }
      &.other-box {
        .list {
          padding: 65px 40px 0 40px;
          height: 85%;
          display: flex;
          justify-content: space-between;
          .item {
            width: 30%;
            height: 295px;
            border: 1px solid rgba(247, 235, 233, 1);
            border-radius: 2px;
            padding: 60px 0 0 20px;
            .text {
              display: flex;
              flex-direction: column;
              position: relative;
              .item-tip {
                font-size: 14px;
                color: #999;
                padding-bottom: 17px;
              }
              .card-panel-num {
                font-size: 18px;
                font-weight: bolder;
              }
              &::after {
                content: "";
                width: 120px;
                height: 8px;
                background: linear-gradient(
                  -90deg,
                  rgba(252, 252, 252, 1),
                  rgba(241, 241, 242, 1)
                );
                position: relative;
                left: 0;
                top: 135px;
              }
            }
          }
        }
      }
    }
  }
}
</style>